<template>
  <div class="container" v-if="!showEdit">
    <div class="header">
      <div class="header-left">
        <div class="title">校区列表</div>
        <el-button style="margin-left: 30px" type="primary" @click.prevent="add" plain size="medium">创建校区</el-button>
      </div>
      <div class="header-right">
        <!--        <el-button type="primary">列操作</el-button>-->
      </div>

    </div>
    <el-table :data="tableData.ListData" stripe v-loading="loading" style="width: 100%"
              :header-cell-style="{textAlign:'center'}"
              :cell-style="{textAlign:'center'}"
              border
    >
      <el-table-column prop="ID" label="id" width="80"></el-table-column>
      <el-table-column prop="Logo" label="图片" width="180">
        <el-image
          v-if="scope.row.Logo"
          slot-scope="scope"
          :src="tableData.ImageUrl+scope.row.Logo"
          :preview-src-list="imgSrcList"
          style="max-height: 50px; max-width: 120px"
        />
      </el-table-column>
      <el-table-column prop="CampusName" label="校区名称" width="120" ></el-table-column>
      <el-table-column prop="Address" label="校区地址" width="150" show-overflow-tooltip></el-table-column>
      <el-table-column prop="Longitude" label="经度" width="100"></el-table-column>
      <el-table-column prop="latitude" label="纬度" width="100"></el-table-column>
      <el-table-column label="排序" width="350px">
        <template slot-scope="props">
          <el-button @click="handleCell(props.row,'Up')" size="mini">上移</el-button>
          <el-button @click="handleCell(props.row,'Down')" size="mini">下移</el-button>
          <el-button @click="handleCell(props.row,'Top')" size="mini">置顶</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="Status" label="是否启用" >
        <template slot-scope="scope">
          <el-switch
            size="medium"
            v-model="scope.row.Status"
            @change="switchChange(scope.row)"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-text="启用"
            inactive-text="停用"
            :active-value="1"
            :inactive-value="0"
          ></el-switch>
        </template>
      </el-table-column>

      <el-table-column prop="address" label="操作" width="200px">
        <template slot-scope="scope">
          <el-button @click.prevent="handleEdit(scope.row)" type="primary" size="mini">编辑</el-button>
          <el-button
            @click.prevent="handleDelete(scope.row)"
            type="danger"
            size="mini"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination @current-change="handleCurrentChange" :page-size="pageCount" :current-page="currentPage"
                     :total="totalNums" :background="true" layout="prev, pager, next, jumper"/>
    </div>
  </div>
  <campus-edit v-else @editClose="editClose" :id="id" :is-create="isCreate"/>
</template>

<script>
import Campus from '@/model/campus'
import CampusEdit from '@/view/campus/campus-edit'

export default {
  name: 'campus-list',
  components: { CampusEdit },
  data () {
    return {
      id: null,
      isCreate: false,
      imgSrcList: [], // 用于大图预览
      showEdit: false,
      tableData: [],
      campusName: null,

      loading: false,
      currentPage: 1,
      pageCount: 10,
      totalNums: 0
    }
  },
  created () {
    this.getAllData()
  },
  methods: {
    async getAllData () {
      try {
        this.loading = true
        const res = await Campus.getCampusS(this.campusName, this.currentPage, this.pageCount)
        this.loading = false
        this.tableData = res
        this.totalNums = res.Total
        this.initImgSrcList()
      } catch (e) {
        this.loading = false
        this.tableData = []
      }

    },
    initImgSrcList () {
      this.tableData.ListData.forEach(item => {
        if (!item.Logo) {
          return
        }
        this.imgSrcList.push(this.tableData.ImageUrl + item.Logo)
      })
    },
    handleCurrentChange (val) {
      this.imgSrcList = []
      this.currentPage = val
      this.getAllData()
    },
    handleEdit (val) {
      this.isCreate = false
      this.id = val.ID
      this.showEdit = true
    },
    async handleCell (val, type) {
      console.log(val, type)
      try {
        this.loading = true
        await Campus.setSortMethod(val.ID, val.Sort, type)
        this.loading = false
        this.$message.success('操作成功')
        this.getAllData()
      } catch (e) {
        this.loading = false
      }
    },
    async switchChange (val) {
      try {
        this.loading = true
        await Campus.updateStatus(val.ID, val.Status)
        this.loading = false
        this.$message.success('操作成功')
        this.getAllData()
      } catch (e) {
        this.loading = false
      }

    },
    handleDelete (val) {
      this.$confirm('此操作将永久删除该项, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(async () => {
        try {
          this.loading = true
          await Campus.delete(val.ID)
          this.loading = false
          this.$message.success('操作成功')
          if (this.totalNums % this.pageCount === 1 && this.currentPage !== 1) {
            this.currentPage--
          }
          this.getAllData()
        } catch (e) {
          this.loading = false
        }

      })
    },
    add () {
      this.isCreate = true
      this.id = null
      this.showEdit = true
    },
    editClose () {
      this.showEdit = false
      this.getAllData()
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 0 30px;

  .header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0 30px;

    .header-left {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .title {
        height: 59px;
        line-height: 59px;
        font-size: 16px;
        font-weight: 500;
        color: $theme;
      }
    }

    .header-right {
      float: right;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }

  .cell-icon-edit {
    display: flex;
    width: 70px;
    justify-content: space-between;

    i {
      cursor: pointer;
      color: #3963bc;
      font-size: 16px;
    }
  }

}

.pagination {
  display: flex;
  justify-content: flex-end;
  margin: 20px;
}
</style>
